<template>
    <view class="order-details">
        <view class="header">
            <view class="top">
                <view class="tryurn">
                    <image src="@/static/images/tryurn.png" mode="" />
                    <text>返回</text>

                </view>
                <view class="kf">
                    <image src="@/static/images/kf.png" mode="" />
                    <text>客服</text>

                </view>
            </view>
            <view class="issue">
                <view class="issue-l">
                    <view class="tops">
                        <image src="@/static/images/wc.png" mode="" />
                        <text>已出票</text>
                    </view>
                    <view class="bot">YD154884566684452</view>
                </view>
                <view class="issue-r">
                    <text>¥</text>
                    <text>322.00</text>
                </view>
            </view>
        </view>
        <view class="content">
            <view class="info">
                <view class="info-t">
                    <view class="box">
                        单程
                    </view>
                    <view class="tips">
                        芜湖-佛山 11月25日-11月26日
                    </view>
                </view>
                <view class="info-bot">
                    <view class="bot-l">
                        <view class="time">23:10</view>
                        <view class="airport">宣州机场</view>
                    </view>
                    <view class="bot-c">
                        <image src="@/static/images/hours.png" mode="" />
                        <view class="hours">共2小时56分钟</view>
                    </view>
                    <view class="bot-l">
                        <view class="time">23:10</view>
                        <view class="airport">宣州机场</view>
                    </view>
                </view>
                <view class="info-name">
                    <image src="@/static/images/name.png" mode="" />
                    <text>中国联合航空KN5869 | 经济舱M8.7折 | 机型:73U1</text>
                </view>
                <view class="info-line"></view>
                <view class="info-from">
                    <view class="info-item">
                        <view class="info-label">乘机人</view>
                        <view class="info-value">张晓梅</view>
                    </view>
                    <view class="info-item">
                        <view class="info-label">电话号</view>
                        <view class="info-value">15504261856</view>
                    </view>
                    <view class="info-item">
                        <view class="info-label">身份证</view>
                        <view class="info-value">210624188801250036</view>
                    </view>
                    <view class="info-item">
                        <view class="info-label">票 &nbsp; 号</view>
                        <view class="info-value">SF4415664548421</view>
                    </view>
                </view>
            </view>
            <view class="luggage">
                <text>查看行李额，退改签规则</text>
                <image src="@/static/images/arrow-rg.png" mode="" />
            </view>
            <view class="insurance">
                <view class="insurance-l">
                    <view class="boxs">
                        保险
                    </view>
                    <text>出行保障</text>
                </view>
                <image src="@/static/images/arrow-bg.png" mode="" />
            </view>
        </view>
        <view class="footer">
            <view class="btn">我要退票</view>
            <view class="btn">我要改签</view>
            <view class="btn">我要报销 </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('订单')
</script>

<style scoped lang="scss">
.order-details {
    height: 100vh;
    position: relative;
    background: #F6F8F5;
    padding-bottom: 140rpx;


    .header {
        background: url("@/static/images/bg.png");
        background-size: 100% 100%;
        padding: 30rpx;
        box-sizing: border-box;
        height: 50%;
        color: #FFF;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40rpx;

            .tryurn {
                font-weight: bold;
                font-size: 36rpx;
                color: #FFFFFF;
                display: flex;
                align-items: center;

                image {
                    width: 20rpx;
                    height: 32rpx;
                    margin-right: 15rpx;
                }
            }

            .kf {
                font-weight: bold;
                font-size: 26rpx;
                color: #FFFFFF;
                display: flex;
                align-items: center;

                image {
                    width: 36rpx;
                    height: 34rpx;
                    margin-right: 15rpx;
                }


            }
        }

        .issue {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .issue-l {
                .tops {
                    display: flex;
                    align-items: center;
                    margin-bottom: 15rpx;
                    font-weight: 800;
                    font-size: 36rpx;
                    color: #FFFFFF;

                    image {
                        width: 46rpx;
                        height: 46rpx;
                        margin-right: 10rpx;
                    }
                }

                .bot {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
            }

            .issue-r {
                font-weight: bold;
                font-size: 42rpx;
                color: #FFFFFF;

                &>:nth-child(1) {
                    font-size: 30rpx;
                    margin-right: 5rpx;
                }
            }
        }
    }

    .content {
        position: absolute;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        top: 240rpx;
        padding: 0 30rpx;
        padding-bottom: 152rpx;


        .info {
            background: #FFFFFF;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 30rpx;
            box-sizing: border-box;

            .info-t {
                display: flex;
                align-items: center;

                .box {
                    width: 76rpx;
                    height: 40rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    background: #1C71F4;
                    border-radius: 5rpx 5rpx 5rpx 5rpx;
                }

                .tips {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #49596D;
                    margin-left: 20rpx;
                }
            }

            .info-bot {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin: 30rpx 0;

                .bot-l {
                    text-align: center;

                    .time {
                        font-weight: bold;
                        font-size: 50rpx;
                        color: #101D34;
                        margin-bottom: 10rpx;
                    }

                    .airport {
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #101D34;
                    }
                }

                .bot-c {
                    image {
                        width: 194rpx;
                        height: 46rpx;
                    }

                    .hours {
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #8C94A1;
                    }
                }
            }

            .info-name {
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 24rpx;
                color: #8C94A1;

                image {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }
            }

            .info-line {
                border: 1px dashed #ccc;
                margin: 30rpx 0;
            }

            .info-from {
                .info-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20rpx;

                    .info-label {
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #8C94A1;
                        margin-right: 20rpx;
                        letter-spacing: 1px;
                        width: 100rpx;
                    }

                    .info-value {
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #101D34;
                    }
                }
            }

        }

        .luggage {
            background: #FFFFFF;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 30rpx;
            box-sizing: border-box;
            margin: 30rpx 0;
            font-weight: 500;
            font-size: 26rpx;
            color: #49596D;
            display: flex;
            align-items: center;
            justify-content: space-between;


            image {
                width: 16rpx;
                height: 22rpx;
            }
        }

        .insurance {
            background: #FFFFFF;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .insurance-l {
                font-weight: 500;
                font-size: 26rpx;
                color: #49596D;
                display: flex;
                align-items: center;

                .boxs {
                    width: 76rpx;
                    height: 40rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    background: #1C71F4;
                    border-radius: 5rpx 5rpx 5rpx 5rpx;
                    margin-right: 20rpx;
                }
            }

            image {
                width: 22rpx;
                height: 16rpx;
            }
        }




    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 50rpx 20rpx;
        box-sizing: border-box;
        box-shadow: 14rpx 0rpx 34rpx 0rpx #ccc;

        .btn {
            background: #1C71F4;
            border-radius: 14rpx 14rpx 14rpx 14rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 30rpx;
            color: #FFFFFF;
            padding: 0 50rpx;
            height: 80rpx;
        }

    }


}
</style>